<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统管理首页</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
    <div class="row bg-black text-light" style="min-height: 60px">
        <div class="col-2"><img src="img/market.jpg" width="100%" alt=""></div>
        <div class="col-8 text-center"><p>欢迎使用超市管理系统</p ></div>
        <div class="col-2">
            <span>当前用户</span>
            <span th:text="${username}"></span>
            <span><a href="/logout">退出</a></span>
        </div>
    </div>
    <div class="row" style="min-height: 400px;">
        <div class="col-2 bg-dark text-light">
            <li><a href="/main">管理系统首页</a></li>
            <li><a href="/devices">商品管理</a></li>
            <li><a href="">供应商管理</a></li>
        </div>
        <div class="col-10">
            <div class="col-10">
                <p>对商品进行更新操作</p >
                <!--            表单设计-->
                <p th:text="${data}"></p>
<!--                <form action="/api/devicesUpdate" method="post">-->
                    <div class="form-control">
                        <label for="">序号</label>
                        <input type="text" name="id" id="Id" th:value="${data.id}" disabled="disabled">
                    </div>
                    <div class="form-control">
                        <label for="">商品名</label>
                        <input type="text" name="name" id="name" th:value="${data.name}">
                    </div>
                    <div class="form-control">
                        <label for="">商品价格</label>
                        <input type="text" name="price" id="price" th:value="${data.price}">
                    </div>
                    <div class="form-control">
                        <label for="">数量</label>
                        <input type="text" name="quantity" id="quantity" th:value="${data.quantity}">
                    </div>
                    <div class="form-control">
                        <label for="">种类</label>
                        <input type="text" name="category" id="category" th:value="${data.category}">
                    </div>
                    <div class="form-control">
                        <label for="">供应商</label>
                        <input type="text" name="supplier" id="supplier" th:value="${data.supplier}">
                    </div>
                    <div class="form-control">
<!--                        <input type="submit" value="更改" class="btn btn-warning">-->
                        <button class="btn btn-warning" id="btnUpdate">更新</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    $('#btnUpdate').click(function (){
        var flag=confirm("确认提交更新？");
        if(flag==true){
            $.post("/api/devicesUpdateProcess",{"id":$('#Id').val(),"name":$('#name').val(),"price":$('#price').val(),
            "quantity":$('#quantity').val(),"category":$('#category').val(),"supplier":$('#supplier').val()
            },function (res){
                if(res==1){
                    alert("更新ok");
                    location.href="/devices"
                }else{
                    alert("更新失败！");
                }
            })
        }
    })
</script>